<template>
    <div>
        <el-dialog :visible.sync="show" :before-close="handleClose" title="添加课程" width="54%" :close-on-click-modal="false"
            :close-on-press-escape="false">
            <div class="edu-page-warp">
                <div class="edu-page-title">{{ $t('common.text.filterCondition') }}</div>
                <el-row :gutter="24">
                    <el-col>
                        <el-form
                            :model="queryCourseForm"
                            size="mini"
                            label-position="left"
                            label-width="80px"
                        >
                            <el-row :gutter="24">
                                <el-col :span="10">
                                    <el-form-item label="开课学院:">
                                        <el-select filterable
                                            v-model="queryCourseForm.college"
                                            size="mini"
                                            style="width: 100%"
                                            placeholder="请选择"
                                        >
                                            <el-option
                                                v-for="item in options.college"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">&nbsp;</el-col>
                                <el-col :span="10">
                                    <el-form-item class="float-right no-bottom no-right">
                                        <el-button @click="reset">重置</el-button>
                                        <el-button type="primary" @click="onSubmit">筛选</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-col>
                </el-row>
                <div class="edu-page-title">添加默认值</div>
                <el-row>
                    <el-col>
                        <el-form
                            :model="queryCourseForm"
                            size="mini"
                            label-position="left"
                            label-width="80px"
                            inline
                        >
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="课程区分:">
                                        <el-radio v-model="weeksType" label="0">教学周</el-radio>
                                        <el-radio
                                            v-model="weeksType"
                                            label="1"
                                            style="margin-left:8px;"
                                        >实践周</el-radio>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="考核方式:">
                                        <el-select v-model="examMode" size="mini">
                                            <el-option
                                                v-for="item in options.examMode"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="是否必修:">
                                        <el-radio v-model="compulsory" label="1">是</el-radio>
                                        <el-radio
                                            v-model="compulsory"
                                            label="0"
                                            style="margin-left:8px;"
                                        >否</el-radio>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-col>
                </el-row>
                <div class="edu-page-title">
                    <span>{{ $t('culture.course.course') }}</span>
                    <el-input
                        v-model="queryCourseForm.condition"
                        type="text"
                        placeholder="课程名称或编号"
                        size="mini"
                        style="float:right;display:inline-block;width:160px;"
                        @keyup.enter.native="onSubmit"
                    >
                        <i
                            slot="suffix"
                            class="el-icon-search"
                            style="margin-top:7px;cursor: pointer;"
                            @click="onSubmit"
                        />
                    </el-input>
                </div>
                <el-row>
                    <el-col>
                        <el-table :data="courses" size="mini" @selection-change="chooseCourse">
                            <el-table-column type="selection" width="55"/>
                            <el-table-column width="120" label="课程编码" prop="code"/>
                            <el-table-column label="课程名称">
                                <template slot-scope="props">{{ props.row.name }}</template>
                            </el-table-column>
                            <el-table-column label="学分" width="50">
                                <template slot-scope="props">{{ props.row.credits }}</template>
                            </el-table-column>
                            <el-table-column label="课时" width="50">
                                <template slot-scope="props">{{ props.row.period }}</template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-pagination
                            :current-page="queryCourseForm.pageNum_"
                            :page-size="queryCourseForm.pageSize_"
                            :total="queryCourseForm.total_"
                            layout="total,  prev, pager, next, jumper"
                            style="float:right;margin-top:4px"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </el-col>
                </el-row>
            </div>
            <span slot="footer">
                <div>
                    <el-button @click="closeDialog">{{ $t('message.cancel') }}</el-button>
                    <el-button type="primary" @click="confirmCourse">{{ $t('message.confirm') }}</el-button>
                </div>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getCourseListNew } from "common/src/api/courseTemplate";
import { queryDic } from "common/src/api/dictionary";
import { findFaculty } from "common/src/api/faculty";
import Bus from "common/src/utils/bus";
import UTILS from "common/src/utils/utils";
export default {
    props: {
        show: {
            default: false, // 1为模板，2为方案
            type: Boolean
        },
        randomId: {
            default: 0,
            type: Number
        },
        isElective: {
            default: "",
            type: String
        }
    },
    data() {
        return {
            queryCourseForm: {
                condition: "",
                pageSize_: 20,
                pageNum_: 1,
                total_: 0,
                college: "",
                status: 3
            },
            options: {
                examMode: [],
                college: [],
                compulsorys: [
                    { label: "是", value: 1 },
                    { label: "否", value: 0 }
                ]
            },
            courses: [],
            checkedCourses: [], // 选择的课程
            examMode: "",
            weeksType: "0",
            compulsory: "1"
        };
    },
    mounted() {
        this.initOptions();
    },
    methods: {
        initOptions() {
            findFaculty().then(res => { 
                let data = {"X_YX": res.data};
                UTILS.fillSelect({ college: "X_YX" }, data, this.options);
            });
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_KSLX"]
            };
            queryDic(data)
                .then(res => {
                    if (res.code == 200) {
                        this.loadOptions("examMode", res.data.X_KSLX);
                    }
                })
                .catch(err => {
                    this.$message({
                        type: "error",
                        message: "获取筛选列表失败"
                    });
                });
        },
        loadOptions(optionKey, dataObj) {
            for (const key in dataObj) {
                this.options[optionKey].push({
                    value: key,
                    label: dataObj[key]
                });
            }
        },
        // 获取课程列表
        getCourses(isFirstPage = false) {
            if (isFirstPage) {
                this.queryCourseForm.pageNum_ = 1;
            }
            this.queryCourseForm.isElective = this.isElective;
            this.queryCourseForm.templateId = this.$route.query.templateId;
            getCourseListNew(this.queryCourseForm)
                .then(response => {
                    if (response.code == 200) {
                        this.courses = response.data.list;
                        this.queryCourseForm.total_ = response.data.total_;
                    }
                })
                .catch(e => {
                    this.$message({
                        type: "error",
                        message: "查询课程列表失败"
                    });
                });
        },
        // 课程查询条件重置
        reset() {
            this.queryCourseForm.condition = "";
            this.examMode = "";
            this.weeksType = "0";
            this.queryCourseForm.college = "";
            this.onSubmit();
        },
        // 课程查询
        onSubmit() {
            this.getCourses(true);
        },
        // 课程查询翻页
        handleCurrentChange(val) {
            this.queryCourseForm.pageNum_ = val;
            this.getCourses();
        },
        // 课程查询页显示数量
        handleSizeChange(val) {
            this.queryCourseForm.pageSize_ = val;
            this.getCourses(true);
        },
        // 确定课程
        confirmCourse() {
            if (this.checkedCourses.length === 0) {
                this.$message({
                    type: "info",
                    message: "请选择一门课程"
                });
                return;
            }
            const data = {
                item: this.checkedCourses,
                weeksType: this.weeksType,
                examMode: this.examMode,
                compulsory: this.compulsory
            };
            Bus.$emit(this.randomId, false, true, data);
            this.clean();
        },
        chooseCourse(val) {
            this.checkedCourses = val;
        },
        handleClose(done) {
            Bus.$emit(this.randomId, false, false);
            done();
            this.clean();
        },
        closeDialog() {
            Bus.$emit(this.randomId, false, false);
            this.clean();
        },
        clean() {
            this.courses = [];
            this.reset();
            this.queryCourseForm.pageNum_ = 1;
            this.queryCourseForm.total_ = 0;
        }
    }
};
</script>
